<template>
	<view>
		<!-- <free-nav-bar title="游客端"></free-nav-bar> -->

		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px)" :show-scrollbar="false">
			<!-- <view class="fixed-title text-center pt-2 pb-2 font-14 text-white">首页</view> -->
			<view class="bg-linear-gradient" style="padding-top: 15px;">
				<view class="p-2">
					<u-swiper height="300" :list="list"></u-swiper>
				</view>
			</view>
			<u-notice-bar style="border: 1px solid #8ed0f2; margin: 10px" color="#8ED0F2" bg-color="#fff"
				border-radius="10" :more-icon="true" class="pl-2 pr-2" mode="vertical" :is-circular="false"
				:list="lists" @click="gitMin('/pages/tabbar/index/NewList')"></u-notice-bar>

			<view class="dfex pl-2 pr-2 mt-6">
				<view style="text-align: center" v-for="(item, index) in CatList" :key="index"
					@click="handleMenuClick(item)">
					<i v-if="item.icon" class="text-white bg-FFC251 p-2 font rounded-circle iconfont"
						v-html="item.icon"></i>
					<view class="mt-4 font-14" style="lineHights">{{ item.name }}</view>
				</view>
			</view>

			<view class="dfex pt-5 pl-2 pr-2 pb-6">
				<view @click="gitMin('/pages/tabbar/index/ProductLaunch')"
					class="bg-white boxShadow p-2 col-46-5 rounded-10">
					<text class="font-weight-bolder font-16 text-FFC251">产品上市简报</text>
					<view class="pt-4 dfex">
						<text>简报管理</text>
						<i class="iconfont icon-a-huaban1fuben4 text-FFC251 font-38"></i>
					</view>
				</view>
				<view @click="gitMin('/pages/tabbar/index/prediction')"
					class="bg-white boxShadow p-2 col-46-5 rounded-10">
					<text class="font-weight-bolder font-16 text-FFC251">产品上市预报</text>
					<view class="pt-4 dfex">
						<text>预报管理</text>
						<i class="iconfont icon-yubaoguanli text-FFC251 font-38"></i>
					</view>
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<!-- 涉农申报列表 -->
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">当季产品查询</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/Agriculture')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class="mt-5">
					<view class="dfex u-line pb-2 mb-2" v-for="(item, index) in nenoList" :key="index"
						@click="gitMinl('tabbar/index/AgricultureDetails', item)">
						<view>
							<text class="text-333333 font-14">{{item.productName || '-'}}</text>
							<view class="mt-2 lineHights font-12 text-999999">
								<view class="wrapa">产品品类：{{ item.productTypeName || '-' }}</view>
								<view class="wrapa">基地名称：{{ item.baseName || '-' }}</view>
							</view>
						</view>
						<view class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white">查看详情</view>
					</view>
					<view class="text-center" v-if="nenoList.length === 0">
						<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
						<view class="text-999999 font-15">暂时木有内容呀~~</view>
					</view>
				</view>
			</view>

			<!-- 政策资讯 -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">政策资讯</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/PolicyList')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class="mt-5">
					<view class="dfex u-line pb-2 mb-2" v-for="(item, index) in newList" :key="index"
						@click="gitMins(item.id)">
						<view>
							<view class="text-333333 font-14 wraps">{{ item.title || '-' }}</view>

							<view class="mt-2 lineHights font-12 text-999999">
								<view>{{ item.source || '-' }}</view>
								<view>{{ item.createTime.slice(0, 10) || '-' }}</view>
							</view>
						</view>
						<view  class="ml-1">
							<img v-if="item.cover" style="width: 143px; height: 95px; border-radius: 5px;" :src="getFullImageUrl(item.cover)" mode=""></img>
						</view>
					</view>
				</view>
			</view>
			<!-- 列表  -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">
				<!-- Tab bar -->
				<view class="dfex">
					<view class="tab-item pb-1" v-for="(tab, index) in tabs" :key="index" @click="currentTab = index"
						:class="{ active: currentTab === index }">
						{{ tab }}
					</view>
				</view>

				<!-- Tab content -->
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌积分榜'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/pointsTable')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '黑名单'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/blacklist')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌执法'">
					<text class="font-14 text-999999"
						@click="gitMin('/pages/tabbar/index/brandEnforcement')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
                 <view class="mt-3">
                 	<template v-if="currentTab === 0">
                 		<view class="dfex" v-for="(item, itemIndex) in brandPointsList.slice(0, 5)" :key="itemIndex">
                 			<view class="dfes pb-1">
                 				<view
                 					:class="['pr-2 font-20', {'index-color-1': (itemIndex % 3) === 0 && itemIndex < 3, 'index-color-2': (itemIndex % 3) === 1 && itemIndex < 3, 'index-color-3': (itemIndex % 3) === 2 && itemIndex < 3, 'font-color-gray': itemIndex >= 3 }]">
                 					{{ itemIndex + 1 }}
                 				</view>
                 			    <u-image style="width: 35px; height: 35px;" border-radius="100" :src="getFullImageUrl(item.avatar)" ></u-image>
                 				<text class="ml-2 font-14 wrap  text-333333">{{item.enterpriseName}}</text>
                 			</view>
                 			<view class="text-78AB06 font-16">{{item.totalIntegral}} 积分</view>
							<view v-if="brandPointsList.length === 0" class="text-center text-999999 font-16">
								<view class="iconfont icon-zanwushuju font-48 pb-1"></view>
								<view class="text-999999 font-15">暂时木有内容呀~~</view>
							</view>
                 		</view>
                 	</template>
                 	<template v-if="currentTab === 1">
                 		<view v-for="(item, itemIndex) in tabContentsList.slice(0, 5)" :key="itemIndex">
                 			<view class="u-line pb-2" @click="openlist(item.id)">
                 				<view class="dfex ">
                 					<view class="wrap">{{item.enterpriseName}}</view>
                 					<view class="mt-2 text-999999 font-12">{{item.updateTime.slice(0, 10)}}</view>
                 				</view>
                 				<view class="wrapa mt-2 text-999999 font-14">{{item.enterprisesReason}}</view>
                 			</view>
                 		</view>
                 		<view v-if="tabContentsList.length === 0" class="text-center text-999999 font-16">
                 			<view class="iconfont icon-zanwushuju font-48 pb-1"></view>
                 			<view class="text-999999 font-15">暂时木有内容呀~~</view>
                 		</view>
                 	</template>
                 	<template v-if="currentTab === 2">
                 		<view v-for="(item, itemIndex) in  contents.slice(0, 5)" :key="itemIndex">
                 			<view class="u-line pb-2 mt-1" @click="openlis(item.id)">
                 				<view class="dfex ">
                 					<view class="wrap">{{item.enterpriseName}}</view>
                 					<view class="mt-2 text-999999 font-12">{{item.createTime.slice(0, 10)}}</view>
                 				</view>
                 				<view class="wrapa mt-2 text-999999 font-14">{{item.enforcementInstructions}}</view>
                 			</view>
                 		</view>
                 		<view v-if="tabContentsList.length === 0" class="text-center text-999999 font-16">
                 			<view class="iconfont icon-zanwushuju font-48 pb-1"></view>
                 			<view class="text-999999 font-15">暂时木有内容呀~~</view>
                 		</view>
                 	</template>
                 </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue'
	import $H from '@/common/free-lib/request.js'
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		components: {
			freeNavBar,
		},
		data() {
			return {
				list: [
					'/static/no.png',
					
				],
				lists: [
				],
				CatList: [{
						icon: '&#xe60b;',
						name: '品牌查询码',
						url: '/pages/tabbar/index/query',
					},
					{
						icon: '&#xe812;',
						name: '需求发布',
						url: '/pages/tabbar/index/NewDemand',
					},
					{
						icon: '&#xe638;',
						name: '企业通讯录',
						url: '/pages/tabbar/index/policy',
					},
					{
						icon: '&#xe622;',
						name: '基地查询',
						url: '/pages/tabbar/market/index',
					},
				],

				nenoList: [],
				newList: [],
				tabs: ['品牌积分榜', '黑名单', '品牌执法'],
				currentTab: 0,
				contents: [],
				brandPointsList:[],
				tabContentsList:[],
			}
		},
		created() {
			this.getNoticeList();
			this.getProductsList();
			this.getReleaseList();
			this.getBriefingList();
			this.getBrandEnList();
			this.brandPoints();
		},
		computed: {
			currentTabContent() {
				return this.tabContentsList[this.currentTab]
			},
		},
		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			// 处理菜单项点击事件
			handleMenuClick(item) {
				this.open(item.url)
			},
			open(url) {
				uni.switchTab({
					url,
				})
				uni.navigateTo({
					url,
				})
			},
			gitMin(url, id) {
				let str = url
				uni.navigateTo({
					url: str,
				})
			},
			gitMins(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/PolicyListDetails?id=${id}`,
				})
			},
			gitMinl(path, item) {
				uni.navigateTo({
					url: `/pages/${path}?item=${JSON.stringify(item)}`,
				})
			},
			//通知公告
			getNoticeList() {
				$H.get(`/basisInform/platformNotice/down/list`, {}, {
					token: true
				}).then(
					(res) => {
						this.lists = (res.result.records || []).map((v) => v.title)
					}
				)
			},
			//当季产品
			getProductsList() {
				$H.get(
					`/agriculture/seasonalProducts/down/list`, {}, {
						token: true
					}
				).then((res) => {
					this.nenoList = res.result.records || []
					if (res.result.records && res.result.records.length > 2) {
						this.nenoList = res.result.records.slice(0, 2)
					}
				})
			},
			//政策
			getReleaseList() {
				$H.get(`/basisInform/policyRelease/down/list`, {}, {
					token: true
				}).then(
					(res) => {
						this.newList = res.result.records || []
						if (res.result.records && res.result.records.length > 2) {
							this.newList = res.result.records.slice(0, 2)
						}
					}
				)
			},
			//积分
			//黑名单
			getBriefingList() {
				$H.get(
					`/agriculture/blacklist/down/list`, {}, {
						token: true
					}
				).then((res) => {
					this.tabContentsList = res.result.records || []
				})
			},
			//执法
			getBrandEnList() {
				$H.get(
					`/agriculture/brandEnforcement/down/list`, {}, {
						token: true
					}
				).then((res) => {
					this.contents = res.result.records || []
				})
			},
			// 品牌积分榜
			brandPoints() {
				$H.get('/basisInform/integral/down/queryIntegralStandingsPageList', {}, {
					token: true
				}).then(res => {
					this.brandPointsList = res.result.records || []
					
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			openlist(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/blacklistDi?id=${id}`
				})
			},
			openlis(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/brandEnforcementDi?id=${id}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #ffc251;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #ffc251;
	}

	.index-color-1 {
		font-size: 22px;
		color: #ff0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #ffc251;
	}
</style>